<template>
<div class="contest-box">
  <JoinContestView v-if="store.state.user?.curUser?.userRole == AccessEnum.USER"/>
  <ManageContestView v-else/>
</div>
</template>

<script setup lang="ts">
import AccessEnum from "@/access/accessEnum";
import { useStore } from "vuex";
import JoinContestView from "@/views/JoinContestView.vue";
import ManageContestView from "@/views/ManageContestView.vue";

const store= useStore();

</script>

<style scoped>
.contest-box {
  margin: 0 auto;
}
.contest-inner-box {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.contest-top {
  height: 25vh;
  background-color: lightgrey;
  padding-top: 10vh;
}
.contest-top-title {
  width: 30%;
  margin-left: 35%;
}
.contest-title-img{
  width: 20%;
  height: 20%;
}
.contest-title {
  text-align: center;
}
.font-title-style {
  font-weight: bolder;
  font-size: 20px;
}
.enterContestBlock {
  position: relative;
  height: 15vh;
}
.enterContestBlockItem {
  position: absolute;
  width: 30%;
  background-color: rgba(100, 149, 237, 0.34);
  height: 100%;
  border-radius: 10px;
  top: -20%;
  left: 12%;
}
.contest-rank-img {
  position: relative;
  width: 100%;
  height: 35vh;
  overflow: hidden;
}
.contest-rank-img img {
  width: 100%;
  border: 3px solid rgba(30, 144, 255, 0.27);
  border-radius: 50%;
}
.contest-rank-img>div {
  display: inline;
  position: absolute;
  width: 50px;
  height: 50px;
}
.contest-rank-img1 {
  top: 40%;
  left: 10%;
}
.contest-rank-img2 {
  top: 10%;
  left: 45%;
}
.contest-rank-img3 {
  top: 40%;
  left: 80%;
}
.cursorPoint {
  cursor: pointer;
}
</style>